<!--  -->
<template>
  <div class="container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" fixed prop="date" label="HLRSN"></el-table-column>
      <el-table-column align="center" prop="name" label="USER"></el-table-column>
      <el-table-column align="center" prop="province" label="IMSI"></el-table-column>
      <el-table-column align="center" prop="city" label="MSISDN"></el-table-column>
      <el-table-column align="center" prop="address" label="Operation"></el-table-column>
      <el-table-column align="center" prop="zip" label="Requset time"></el-table-column>
      <el-table-column align="center" prop="zip" label="Cost"></el-table-column>
      <el-table-column align="center" prop="status" label="Status">
        <template slot-scope="scope">
          <div class="border">{{scope.row.status}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="zip" label="Error Msg"></el-table-column>

      <el-table-column fixed="right" label="Action" width="200">
        <template slot-scope="scope">
          <div class="btn" @click="handleClick(scope.row)" type="text" size="small">View</div>
          <div class="btn-update" type="text" size="small">Export</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      dialogShow: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          status: "success"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          status: "success"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
          status: "success"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
          status: "success"
        }
      ]
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    handleClick(row) {
      this.$emit("showDia",row);
    }
  },
  watch: {}
};
</script>

<style scoped>
.container {
  width: 99%;
  margin-top: 20px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
.btn {
  width: 60px;
  text-align: center;
  background: #e5e5e5;
  border-radius: 5px;
  border-left: 5px solid #5098d6;
  display: inline-block;
}
.btn-update {
  width: 60px;
  text-align: center;
  background: #e5e5e5;
  border-radius: 5px;
  border-left: 5px solid #51a39a;
  display: inline-block;
  margin-left: 20px;
}
.border {
  width: 70px;
  background: #65b4ae;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  margin: auto;
}
</style>